<template>
  <div style="width:1200px;margin:0 auto">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <h1 style="color: orange;text-align: center">
           {{c.title}}
          </h1>
          <p style="text-align: center;font-size: 12px;color: #666">
            作者:{{c.nickname}} | 发布时间:{{c.createTime}} | 阅读次数:{{c.viewCount}}
          </p>
          <hr>
          <div v-if="c.type!=2">
            <el-card>
              <b style="color: #0aa1ed">摘要:</b>
              {{c.brief}}
            </el-card>
            <p  v-html="c.content"></p>
          </div>
          <div v-else>
            <video style="width: 100%"
                   :src="BASE_URL+c.videoUrl"
                   controls type="video/mp4"></video>
          </div>
        </el-card>
<!--    评论相关开始    -->
        <el-card style="margin-top: 20px">
          <p>发一条友善的评论</p>
          <hr>
          <el-row>
            <el-col :span="22">
              <el-input v-model="comment.content" placeholder="请输入评论的内容..."></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="postComment()">发布</el-button>
            </el-col>
          </el-row>
<!--      评论列表    -->
          <el-row style="margin: 20px;" v-for="item in commentArr">
            <el-col :span="2">
              <el-avatar :src="BASE_URL+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="22">
              <p style="color: orange;font-weight: bold;margin: 0">{{item.nickname}}:</p>
              <p style="margin: 5px 0">{{item.content}}</p>
              <p style="color: #666;font-size: 12px">{{item.createTime}}</p>
            </el-col>
          </el-row>
        </el-card>
<!--    评论相关结束    -->

      </el-col>
      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;top: -45px">
            <img :src="BASE_URL+c.userImgUrl" style="width: 90px;height: 90px;
          border:5px solid white;border-radius: 90px">
            <p style="font-size: 20px;font-weight: bold;margin: 0">{{c.nickname}}</p>
            <el-icon><Edit/></el-icon>本文作者<br>
            <el-icon><Clock /></el-icon>{{c.createTime}}
          </div>
        </el-card>
<!--作者其它文章开始-->
        <el-card style="margin:10px 0">
          <h2>作者其它文章</h2>
          <hr>
          <el-row :gutter="20" v-for="item in otherArr">
            <el-col :span="10">
              <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 70px">
            </el-col>
            <el-col :span="14">
            <!--       javascript:void(0)禁用超链接的跳转功能       -->
              <a href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{item.title}}</p>
              </a>

              <el-icon><Clock/></el-icon>
              <span style="font-size: 12px;color: #666">{{item.createTime}}</span>
            </el-col>
          </el-row>
        </el-card>
<!--作者其它文章结束-->
        <!--热门文章开始-->
        <el-card style="margin:10px 0">
          <h2>热门文章</h2>
          <hr>
          <el-row :gutter="20" v-for="item in hotArr">
            <el-col :span="10">
              <a href="javascript:void(0)" @click="detail(item.id)">
              <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 70px">
              </a>
            </el-col>
            <el-col :span="14">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{item.title}}</p>
              </a>
              <el-icon><Clock/></el-icon>
              <span style="font-size: 12px;color: #666">{{item.createTime}}</span>
            </el-col>
          </el-row>
        </el-card>
        <!--热门文章结束-->

      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";

const comment = ref({content:''});
const postComment=()=>{
  if (comment.value.content.trim()==''){alert("评论内容不能为空!")}
  let user = getUser();
  if (user==null){alert("请先登录!");router.push('/login');return;}
  comment.value.userId = user.id;//设置当前登录的用户id 为评论作者的id
  comment.value.contentId = c.value.id;//把文章id装进评论对象中
  let data = qs.stringify(comment.value);
  //发请求
  axios.post(BASE_URL+'/v1/comments/add-new',data).then((response)=>{
    if (response.data.code==1){
      alert("评论完成!");
      loadComments(c.value.id);
    }
  })
}

const commentArr = ref([]);
const loadComments=(id)=>{
  //请求当前文章相关的评论
  axios.get(BASE_URL+'/v1/comments/'+id).then((response)=>{
    if (response.data.code==1){
      commentArr.value = response.data.data;
    }
  })
}


const c = ref({});
const otherArr = ref([]);
const hotArr = ref([]);

const detail=(id)=>{
  router.push('/detail?id='+id);//修改地址栏中的地址
  loadComments(id); //加载评论
  axios.get(BASE_URL+'/v1/contents/'+id+"/detail").then((response)=>{
    if (response.data.code==1){
      c.value = response.data.data;
      //通过作者id发出请求获取作者相关内容 c.value.userId
      //此处写发请求的代码
      axios.get(BASE_URL+'/v1/contents/'+c.value.userId+"/other")
          .then((response)=>{
            if (response.data.code==1){
              otherArr.value = response.data.data;
            }
          })
    }
  })
}
onMounted(()=>{

  //得到地址栏中的id 然后发请求获取id对应的内容详情
  let id = new URLSearchParams(location.search).get('id');
  //请求当前文章的评论
  loadComments(id);
  detail(id);
  //发出热门文章的请求
  axios.get(BASE_URL+'/v1/contents/hot')
      .then((response)=>{
        if (response.data.code==1){
          hotArr.value = response.data.data;
        }
      })
})

</script>

<style scoped>
  #head_div{
    height: 90px;
    background-image: url("/public/imgs/avarbg.jpg");
  }
  .title_p {
    height: 40px;
    overflow: hidden; /*超出不显示*/
    /*设置省略号相关样式*/
    display: -webkit-box;
    -webkit-line-clamp: 2; /*设置行数*/
    -webkit-box-orient: vertical; /*纵向*/
  }
  a{
    color: #333;
    text-decoration: none;
  }
  a:hover{
    color: orange;
  }

</style>